<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
      @keyup.enter="publishHandle"
    />
    <!-- 发布数据,输入内容后点击回车键,将输入的内容渲染在列表上
    1.给input框绑定一个回车事件
    2.下方定义事件函数 -->
  </div>
</template>

<script>
//3.引入uuid,书写下方newTodo数据,然后去App中发布
import { v4 as uuidv4 } from "uuid";

export default {
  name: "Header",
  //4.porps接收数据,接收完就可以随时随地进行调用,下方调用并将数据newTodo作为参数传入
  props: ["addNewTodo"],
  methods: {
    //2.回车事件函数,点击回车后需要拿到输入框的数据,然后展示,
    //怎么能拿到我们输入的内容呢?打印e,我们可以拿到target(即当前input数据)
    publishHandle(e) {
      const newTodo = { id: uuidv4, thing: e.target.value, done: false };
      this.addNewTodo(newTodo);
      /* 
        组件通信中 子传父的方式
          - 在父组件中定义一个方法,通过props把方法传递给子组件
          - 然后子组件调用这个方法,并传参
          - 父组件的函数就能接受到子组件传递的参数
      */
      //数据发布后需要清空输入框内容
      e.target.value = "";
    },
  },
};
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}
</style>